<template>
  <div class="look-question">
    <div class="question-header">
      <span> 课程类型: </span>
      <div class="box">
        <span
          v-for="(item, index) in subjectList"
          :class="flag ? 'active' : index === count ? 'active' : ''"
          @click="changeTab(index)"
          :key="index"
        >
          {{ item.subject_text }}
        </span>
      </div>
      <Select
        @sendId="acceptId"
        title="考试"
        type="exam_name"
        selId="exam_id"
      />
      <Select
        title="题目"
        @sendId="acceptId"
        type="questions_type_text"
        selId="questions_type_id"
      />
      <el-button @click="search" type="primary">查询</el-button>
    </div>
    <!-- 列表 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="考试类型" width="140">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.exam_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题目类型" width="140">
          <template slot-scope="scope">
            {{ scope.row.questions_type_text }}
          </template>
        </el-table-column>
        <el-table-column label="课程类型" width="180">
          <template slot-scope="scope">
            {{ scope.row.subject_text }}
          </template>
        </el-table-column>
        <el-table-column label="试题名称" width="180">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="open(scope.row)">查看</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getSubject, getCondition } from "@/api/exam";
import Select from "./components/Select.vue";
export default {
  data() {
    return {
      subjectList: [],
      count: 1,
      flag: false,
      subData: {},
      tableData: [],
    };
  },
  components: {
    Select,
  },
  created() {
    getSubject().then((res) => {
      this.subjectList = res.data;
      this.subjectList.unshift({
        subject_text: "All",
        subject_id: "",
      });
    });
  },
  methods: {
    open(row) {
      this.$alert(
        `<div><p><strong>题目</strong>: ${row.questions_stem} </p><p><strong>答案</strong>: ${row.questions_answer} </p><p><strong>出题人</strong>: ${row.user_name} </p></div>`,
        "HTML 片段",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    acceptId({ type, value }) {
      this.subData[type] = value;
    },
    changeTab(index) {
      if (index > 0) {
        this.flag = false;
        this.count = index;
      } else {
        this.flag = true;
      }
      this.subData.subject_id = this.subjectList[index].subject_id;
    },
    search() {
      // 判断subData 的长度
      let length = Object.keys(this.subData).length;
      if (length > 2) {
        getCondition(this.subData).then((res) => {
          this.tableData = res.data;
          console.log(res.data);
        });
      } else {
        this.$message({
          message: "三个条件都得选哦",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style scoped>
.question-header {
}
.box {
  font-size: 12px;
}

.box span {
  text-align: center;
  display: inline-block;
  width: 100px;
  padding: 5px 8px;
  margin: 5px;
}

.active {
  background: #0139fd;
  color: #fff;
}
</style>